<template>
  <!-- 定制 vant 主题色调 -->
  <van-config-provider theme="light" class="box">
    <!-- 顶部安全区 -->
    <!-- <van-nav-bar safe-area-inset-top /> -->

    <div v-if="$myRoute.meta.is_header" class="header"></div>

    <div class="content">
      <!-- 路由视图出口 -->
      <router-view></router-view>
    </div>

    <div v-if="$myRoute.meta.is_footer" class="footer">
      <SdyFooter></SdyFooter>
    </div>

    <!-- 底部安全区 -->
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
  </van-config-provider>
</template>

<script name="sdyApp" setup lang="ts">
// 导入当前路由信息
import { useRoute } from 'vue-router'
// 导入底部组件
import SdyFooter from './components/footer.vue'

const $myRoute = useRoute()
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  > .header {
    overflow: hidden;
  }

  > .footer {
    height: 50px;
  }

  > .content {
    flex: 1;
    overflow: auto;
    padding: 5px 0;
  }
}
</style>
